<template>
  <div class="body">

    <!-- 卡片效果 -->
    <el-row :gutter="20">
      <el-col :span="5" v-for="(item, index) in APP_list" :key="index" >
        <el-card :body-style="{ padding: '0px' }">
          <img :src="item.cover" class="image">
          <div style="padding: 14px;">
            <span>{{item.title}}</span>
            <div class="bottom clearfix">
              <div class="infor">{{item.infor}}</div>
              <el-button type="success" class="button" size="small">
                <router-link tag="div" :to="{ name: 'xadmin', params: { app_id: item.id}}">管理项目</router-link>
               </el-button>
              <el-button type="warning" class="button" size="small">
                <!-- <router-link tag="div" :to="item.index_url">项目主页</router-link> -->
                <a :href="item.index_url">项目主页</a>
              </el-button>

            </div>
          </div>
        </el-card>
      </el-col>

     <!-- 添加APP -->
      <el-col :span="5" >
        <el-card :body-style="{ padding: '0px' }">
          <!-- <img src="../assets/add.png" class="image"> -->
          <div @click="show_model_form" id="add-APP" class="add-APP"><i class="el-icon-plus"></i><span style="color: #606266;">添加</span></div>
        </el-card>
      </el-col>



    </el-row>


    <!-- 侧面展开面板 -->
    <el-drawer
      title="添加APP，填写信息："
      :visible.sync="model_form"
      direction="rtl"
      :with-header="false"
      :before-close="model_form_Close">

      <!-- 面板内容 -->
      <div class="model_form">
        <h1>添加APP：</h1>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="APP名称" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>

          <el-form-item label="主页路由" prop="index_url">
            <el-input v-model="ruleForm.index_url"></el-input>
          </el-form-item>

          <el-form-item label="配置路由" prop="conf_url">
            <el-input v-model="ruleForm.conf_url">
              <el-button slot="append" icon="el-icon-s-promotion" @click="getMenuDict"></el-button>
            </el-input>

          </el-form-item>

          <el-form-item label="路由字典" prop="menu_dict">
              <el-input :readonly="true" type="textarea" v-model="ruleForm.menu_dict" placeholder="点击上面的【飞机✈】自动获取" :rows="4"></el-input>
           </el-form-item>

          <el-form-item label="项目简介" prop="infor">
            <el-input v-model="ruleForm.infor" ></el-input>
          </el-form-item>



          <el-form-item label="是否置顶" prop="top">
            <el-switch v-model="ruleForm.top"></el-switch>
          </el-form-item>



          <el-form-item label="封面上传" prop="cover">

            <el-upload
              class="avatar-uploader"
              :action="upload_image_url + 'cover/'"
              :show-file-list="false"
              :on-success="CoverSuccess"
              name="image"
              :headers="upload_image_header"
              :before-upload="beforeAvatarUpload">
              <img v-if="ruleForm.cover" :src="ruleForm.cover" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>


    </el-drawer>


  </div>
</template>

<script>
  export default{
    name:"Vbody",
    data(){
      return{
        upload_image_url: this.$url,
        upload_image_header:{'token': this.$store.state.token},
        // 控制侧面板是否打开
        model_form:false,

        // APP列表
        APP_list:[],

        table: false,
        dialog: false,
        loading: false,
        // 表单内容
        ruleForm: {
          title: '',
          conf_url: '',
          index_url: '',
          infor: '',
          menu_dict:[],
          top:false,
          cover:""
        },
        // 表单填写规则
        rules: {
          title: [
            { required: true, message: '请输入项目名称', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          conf_url: [
            { required: true, message: '请输入配置URL', trigger: 'blur' }
          ],
          index_url: [
            { required: true, message: '请输入主页URL', trigger: 'blur' }
          ],
          infor: [
            { required: true, message: '请简单介绍项目', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ],
          menu_dict: [
            { required: true, message: '请点击配置路由右边的飞机，系统将会自动获取！', trigger: 'blur' }
          ],
          cover: [
            { required: true, message: '请上传封面', trigger: 'blur' }
          ]
        }

      }
    },
    methods:{
      // 打开模态框
      show_model_form(){
        this.model_form = true;
      },
      // 关闭模态框
      model_form_Close(){
        this.model_form = false;
      },

      // 提交表单
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            // 校验通过，可以提交
            let _this = this
            _this.$axios.post( _this.$url + 'app_info/', {
              user: this.$store.state.user_id,
              title:_this.ruleForm.title,
              index_url:_this.ruleForm.index_url,
              conf_url: _this.ruleForm.conf_url,
              menu_dict: _this.ruleForm.menu_dict,
              top: _this.ruleForm.top,
              infor: _this.ruleForm.infor,
              cover: _this.ruleForm.cover
            },
            {headers: {
              'token': this.$store.state.token,
              'Content-Type':'application/json'
            }}).then(function (res) {
              console.log("==============",res)

              if(res.status < 300){
                //正在提交
                const loading = _this.$loading({
                  lock: true,
                  text: '正在添加，请稍后...',
                  spinner: 'el-icon-loading',
                  background: 'rgba(0, 0, 0, 0.7)'
                });

                // 创建成功，重写获取APP
                _this.getMyApp();
                // 清楚数据
                _this.$refs[formName].resetFields();
                // 关闭模态框
                _this.model_form = false;

                setTimeout(() => {
                  loading.close();
                }, 2000);

                return;
              }
             _this.$message.error('出错了！请重试...');

             }).catch(function (error) {
               console.log("出错了：",error);
             });


          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },


      // 封面上传成功钩子
      CoverSuccess(res, file) {
        console.log(res)
        this.ruleForm.cover = res.image;
        console.log(this.ruleForm.cover)
      },

      // 封面上传规则
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },


      getMyApp(){
        let _this = this
        console.log(_this.$store.state)
        this.$axios.get(_this.$url + 'app_info/',{
          params:{
            user_id:this.$store.state.user_id,
            token: this.$store.state.token,
          },
          headers: {
            'token': this.$store.state.token,
            'Content-Type':'application/json'
          },
        }).then(function (res) {
          console.log(res);
          if(res.status < 300){
            _this.APP_list = res.data
          }

        })
      },

      // 获取路由字典
      getMenuDict(){
        if(this.ruleForm.conf_url.length == 0){
          this.$message.error('请先填写配置路由！！！');
          return;
        }
        let _this = this
        this.$axios.get(this.ruleForm.conf_url).then(function(res){
          if(res.data.code == 2000){
            _this.ruleForm.menu_dict = JSON.stringify(res.data.app_conf)

            _this.$message({
              message: '获取成功！',
              type: 'success'
            });
          }else{
            _this.$message.error('获取失败！');
          }

        }).catch(function (error) {
          _this.$message.error('获取失败！');
        });


      }


    },
    mounted() {
      // console.log(this.$store.state.user_id)
      // 去后台拿我的APP的数据
      this.getMyApp();


    }

  }
</script>

<style>
  .body{
    margin: 20px;
  }

  .infor {
      margin-bottom: 20px;
      font-size: 13px;
      color: #999;
    }

    .bottom {
      margin-top: 13px;
      /* line-height: 12px; */
    }

    .button {
      float: right;
      margin-left: 5px;
    }

    .image {
      width: 100%;
      display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .add-APP{
      text-align: center;
      padding: 100px 0;
      /* border: 1px #303133 solids; */
      border: 1px dashed #a8a8a8;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .add-APP:hover{
      border: 1px dashed #3a3a3a;
    }

    .model_form{
      padding: 20px;
      overflow-y: scroll;
      height: 600px;
    }


    /* 封面有关 */
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
